<script lang="ts" setup>
import SubHeader from '@/components/SubHeader.vue'
import FullHeightTable from '@/components/FullHeightTable.vue'
import { h, ref } from 'vue'
import { type DataTableProps, NIcon, NSwitch } from 'naive-ui'
import { useRenderAction } from '@/hooks/useRenderActions'
import { menuListGet, menuMenuIdDelete, menuPut } from "@/api";
import { mergeColumns } from '@/utils'
import { Add12Regular, ArrowCircleDown16Filled, ArrowCircleUp16Filled } from '@vicons/fluent'
import type { OMenuListGetItem, OPublishShopGoodsCategoryListGetItem } from '@/typed/response'
import AddMenuModal from '@/views/console/system/components/AddMenuModal.vue'
import { menuListColumns } from '@/tableColumns/menu.list'
import { MENU_STATUS_ENUM, MENU_VISIBLE_ENUM } from '@/const/menu.list'

const table = ref()
const showAddModal = ref<boolean>(false)
const tableData = ref<OMenuListGetItem[]>([])
const currentItem = ref<OPublishShopGoodsCategoryListGetItem | undefined>()

const tableProps = ref<DataTableProps>({
	scrollX: 1000,
	rowKey: (item) => item.menuId,
	columns: mergeColumns(menuListColumns, {
		1: [
			{
				title: '是否启用',
				key: 'status',
				width: 80,
				render: item => h(NSwitch, {
					value: item.status,
					checkedValue: MENU_STATUS_ENUM.enable,
					uncheckedValue: MENU_STATUS_ENUM.disable,
					onUpdateValue: (v) => {
						item.status = v;
						updateMenu(item, 'status', v)
					}
				})
			}, {
				title: '是否显示',
				key: 'visible',
				width: 80,
				render: item => h(NSwitch, {
					value: item.visible,
					checkedValue: MENU_VISIBLE_ENUM.enable,
					uncheckedValue: MENU_VISIBLE_ENUM.disable,
					onUpdateValue: (v) => {
						item.visible = v;
						updateMenu(item, 'visible', v)
					}
				})
			}, {
				title: '排序调整',
				key: 'orderNum',
				width: 80,
				render: item => h('div', {
					style: {
						display: 'flex',
						gap: '5px',
						alignItems: 'center',
						color: 'var(--primary-color)'
					}
				}, [
					h('div', {}, [item.orderNum]),
					h(NIcon, {
						size: 20,
						style: {cursor: 'pointer'},
						component: ArrowCircleUp16Filled,
						onClick: async () => {
							await updateMenu(item, 'orderNum', item.orderNum - 1)
							table.value.reload()
						}
					}),
					h(NIcon, {
						size: 20,
						style: {cursor: 'pointer'},
						component: ArrowCircleDown16Filled,
						onClick: async () => {
							await updateMenu(item, 'orderNum', item.orderNum + 1)
							table.value.reload()
						}
					})
				])
			}
		],
		end: [{
			title: '操作',
			key: 'actions',
			width: 240,
			fixed: 'right',
			align: 'center',
			render: (item) =>
				useRenderAction([
					/*{
						label: '删除',
						type: 'error',
						round: true,
						disabled: hasUsedChild(item),
						onClick: () => onDelete(item)
					},*/
					{
						label: '编辑',
						type: 'info',
						round: true,
						onClick: () => {
							currentItem.value = item
							showAddModal.value = true
						},
					},
					{
						label: '复制',
						type: 'info',
						round: true,
						onClick: () => {
							currentItem.value = {
								...item,
								orderNum: item.orderNum + 1,
								menuId: undefined,
							}
							showAddModal.value = true
						},
					}
				])
		}]
	})
})

async function onDelete(item: OMenuListGetItem) {
	window.$dialog.warning({
		title: '删除确认',
		content: '确定要删除此菜单码？',
		positiveText: '确定',
		negativeText: '取消',
		maskClosable: false,
		onPositiveClick: async () => {
			const {code} = await menuMenuIdDelete(item.menuId)
			if (code === 200) {
				window.$message.success('删除成功')
				table.value.deleteItem('menuId', item.menuId)
			}
		},
	})
}

function onAdd() {
	currentItem.value = undefined
	showAddModal.value = true
}


async function updateMenu(item: OMenuListGetItem, name: string, value: any) {
	await menuPut({
		frame: item.isFrame,
		menuId: item.menuId,
		menuName: item.menuName,
		menuType: item.menuType,
		orderNum: item.orderNum,
		parentId: item.parentId,
		path: item.path,
		perms: item.perms,
		status: item.status,
		visible: item.visible,
		[name]: value
	})
}

function reloadTable() {
	showAddModal.value = false
	table.value.reload();
}

function hasUsedChild(item: OMenuListGetItem): boolean {
	if (item.status === 0) {
		return true
	} else if (item.children?.length) {
		let isUsed = false
		item.children.forEach(sub => {
			if (!isUsed) {
				isUsed = hasUsedChild(sub);
			}
		})

		return isUsed
	} else {
		return false
	}
}
</script>

<template>
	<n-layout>
		<sub-header>
			<template #right>
				<n-button type="primary" @click="onAdd">
					<template #icon>
						<n-icon>
							<Add12Regular/>
						</n-icon>
					</template>
					新建菜单
				</n-button>
			</template>
		</sub-header>
		<n-layout class="content">
			<FullHeightTable
				ref="table"
				:table-props="tableProps"
				:table-request="menuListGet"
				@load="data=>tableData=data"
			/>
		</n-layout>
		<AddMenuModal
			v-model:show="showAddModal"
			:data="currentItem"
			:options="tableData"
			@update:list="reloadTable"
		/>
	</n-layout>
</template>
<style lang="less" scoped>
.content {
	padding: 0 20px 20px 20px;
}
</style>
